<template>
  <!-- <h1>药方</h1>
  <div>搜索框表单</div> -->
  <div>
    <el-input
      v-model="searchInput"
      class="keywords"
      placeholder="请输入药品相关信息搜索"
      :suffix-icon="Calendar"
    />
    <el-button class="search" type="primary" style="" @click="search">搜索</el-button>
    <el-table :data="drugList" style="width: 95%" height="250" class="table1">
      <el-table-column type="index" label="序号" width="60" />
      <!-- <el-table-column fixed prop="id" label="药品编号" width="200" /> -->
      <el-table-column prop="name" label="药品名称" width="180" />
      <el-table-column prop="specification" label="规格" width="180" />
      <el-table-column prop="manufacturer" label="厂商" width="200" />
      <el-table-column prop="usageDosage" label="用法用量" width="210" />
      <el-table-column prop="drugType" label="类别" width="160" />
      <el-table-column prop="inventory" label="库存" width="160" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button
            class="addButton"
            type="primary"
            size="small"
            @click="addToSelectedList(scope.$index, scope.row)"
            >添加</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="prescriptionItems" style="width: 95%" height="250" class="table2">
      <el-table-column type="index" label="序号" width="60" />
      <!-- <el-table-column fixed prop="id" label="药品编号" width="200" /> -->
      <el-table-column prop="name" label="药品名称" width="200" />
      <el-table-column prop="specification" label="规格" width="200" />
      <el-table-column prop="manufacturer" label="厂商" width="200" />
      <el-table-column prop="usageDosage" label="用法用量" width="200" />
      <el-table-column prop="drugAmount" label="当前选择数量" width="200" />
      <el-table-column fixed="right" label="Operations" width="130">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="minusAmount(scope.$index, scope.row)"
            >－</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="addAmount(scope.$index, scope.row)"
            >＋</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button class="submit" type="primary" style="" @click="submitPrescriptionItems"
      >提交</el-button
    >
    <!-- <button>查询</button>
  <div>表格显示搜索结果</div>
  <div>表格显示已选择的药品</div>
  <button>提交</button> -->
  </div>
</template>

<script>
import request from "@/utils/forward/request";

export default {
  data() {
    return {
      patientHistoryId: this.$store.state.doctorOptions.patientHistoryId,
      prescriptionId: "",
      drugList: [],
      prescriptionItems: [],
      searchInput: "",
      prescriptionId: "",
    };
  },

  methods: {
    handleClick() {
      console.log("click");
    },
    addToSelectedList(index, row) {
      let flag = false;
      this.prescriptionItems.forEach((e) => {
        if (e.id === row.id) {
          e.drugAmount++;
          flag = true;
        }
      });
      if (!flag) {
        const prescriptionItem = row;
        prescriptionItem.drugAmount = 1;
        this.prescriptionItems.push(prescriptionItem);
      }
    },
    addAmount(index, row) {
      row.drugAmount++;
    },
    minusAmount(index, row) {
      if (row.drugAmount == 1) {
        this.prescriptionItems = this.prescriptionItems.filter((e) => {
          return e != row;
        });
      }
      row.drugAmount--;
    },
    search() {
      if (this.searchInput == "") {
        this.$message.warning("请输入搜索内容！");
        return;
      }
      let searchInput = this.searchInput;
      request("get", "drug/searchDrugs", {
        searchInput: searchInput,
      }).then((res) => {
        this.drugList = res.result.map((e) => {
          return {
            id: e.ID,
            name: e.NAME,
            specification: e.SPECIFICATION,
            manufacturer: e.MANUFACTURER,
            usageDosage: e.USAGE_DOSAGE,
            drugType: e.DRUG_TYPE,
            inventory: e.INVENTORY,
          };
        });
      });
    },
    submitPrescriptionItems() {
      const that = this;
      // prescriptionId: that.prescriptionId,

      const prescriptionItemList = that.prescriptionItems.map((e) => {
        return {
          drugId: e.id,
          drugAmount: e.drugAmount,
          // 后端加发放状态、支付状态
        };
      });
      const prescriptionInfo = {
        prescriptionId: that.prescriptionId,
        prescriptionItemList: prescriptionItemList,
      };
      request("post", "prescriptionItem/submitPrescriptionItems", prescriptionInfo).then(
        (res) => {
          if (res.result) {
            this.$message.success("提交成功！");
          } else {
            this.$message.err("提交失败！");
          }
        }
      );
    },
  },

  mounted() {
    //显示相关
    //显示可选择的药品的id,name,specification(规格),manufacturer(厂商),
    // usage_dosage(用法用量),drug_type(药品类型),inventory(库存)
    // 显示已选择的
    //操作相关
    //可增加减少已选择的单个药品数量 drug_amount
    //搜索、提交

    // 根据病历id从后端获取prescriptionId，没有就创建
    const requestPrescriptionInfo = {
      patientHistoryId: this.$store.state.doctorOptions.patientHistoryId,
    };
    request(
      "post",
      "prescription/createAndReturnPrescription",
      requestPrescriptionInfo
    ).then((res) => {
      const that = this;
      this.prescriptionId = res.result;
      //获取已选择信息
      request("get", "prescriptionItem/getSubmitPrescriptionItems", {
        prescriptionId: res.result,
      }).then((res2) => {
        that.prescriptionItems = res2.result.map((e) => {
          return {
            id: e.ID,
            name: e.NAME,
            specification: e.SPECIFICATION,
            manufacturer: e.MANUFACTURER,
            usageDosage: e.USAGEDOSAGE,
            drugType: e.DRUGTYPE,
            inventory: e.INVENTORY,
            drugAmount: e.DRUGAMOUNT,
          };
        });
      });
    });
  },
};
</script>

<style>
.keywords {
  width: 500px;
  height: 50px;
}
.search {
  width: 130px;
  height: 50px;
}
.table1 {
  width: 100%;
  margin-top: 10px;
}
.table2 {
  width: 100%;
  margin-top: 10px;
}
.submit {
}
.addButton {
  margin-left: 20px;
}
</style>
